<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Content</title>
    <link rel="stylesheet" href="../statics/css/bootstrap.min.css">
    <link rel="stylesheet" href="../statics/HTMLCSS/novalContent.css">
    <meta name="viewport" content="width=device-width,initial-scale=1" />
</head>


<body background="../statics/Photo/雪地.jpg" style="background-repeat: no-repeat;
            background-size: 100% 100%;
            background-attachment: fixed;
            width:100%;">
    <h1 style="margin-left: 800px;position: absolute;top:30px;font-weight: bold;font-family: fantasy;">Welcome to your
        write life📕</h1>
    <div id="container" style="width:100%;">
        <div id="top">

        </div>
        <div id="left">
            <div id="personalData">
                <div class="card-header"
                    style="font-family: fantasy; font-size: 25px;margin-left: 28px; float: left;margin-bottom: 5px;border: solid 2px black;border-radius: 8px;">
                    Personal Data
                </div>
                <p style="font-family: fantasy;"></p>

                <!-- 头像 -->
                <img src="../statics/Photo/p.png" alt="" style="margin-left: 20px;margin-top: 0px;">
                <p></p>
                <!-- 昵称 -->
                <p
                    style="font-family: fantasy;font-size: 20px;margin-left: 40px;border: solid 2px black;border-radius: 8px;width: 160px;text-align: center;">
                    User:&nbsp;&nbsp;&nbsp;&nbsp;Messi
                    bibi</p>
                <!-- 虚线 -->
                <hr style="border:1px dashed #000" />

                <p></p>
                <li id="friends" style="border: solid 2px black;border-radius: 5px;display: inline;">加好友</li>
                <li id="addNews" style="border: solid 2px black;border-radius: 5px;display: inline;">加关注</li>
                <p></p>
                <li id="sendPaper" style="border: solid 2px black;border-radius: 5px;display: inline;">发纸条</li>
                <li id="writeTalk" style="border: solid 2px black;border-radius: 5px;display: inline;">写留言</li>
                <p></p>

                <hr style="border:1px dashed #000" />

                &nbsp;&nbsp;<span
                    style="font-family:fantasy;">Level:</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <span style="font-family: fantasy;font-size: larger ;">130</span><br>
                <br>

                &nbsp;&nbsp;&nbsp;<span style="font-family:fantasy;">P&nbsp;&nbsp;V:</span>
                <span
                    style="font-family: fantasy;font-size: larger ;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4,546,231,742</span><br>
                <br>

                &nbsp;<span style="font-family:fantasy;">Attention:</span>
                <span style="font-family: fantasy;font-size: larger ;">&nbsp;&nbsp;&nbsp;945,213</span><br>
                <br>

                &nbsp;<span style="font-family:fantasy;">Gold Icon:</span>
                <span style="font-family:fantasy;">&nbsp;&nbsp;&nbsp;&nbsp;133,785</span><br>
                <br>

                &nbsp;&nbsp;<span style="font-family:fantasy;">Medal:</span>
                <span style="font-family:fantasy;">&nbsp;&nbsp;&nbsp;&nbsp;</span>

            </div>
        </div>
        <div id="right">

            <div class="card-header"
                style="font-family: fantasy; font-size: 25px;margin-top: 15px; float: left;margin-bottom: 5px;border: solid 2px black;border-radius: 8px;width: 460px;">
                Just Saying
            </div>
            <!-- //Talk Content -->

            <div id="rightContent"
                style="position:absolute; height:520px;width: 460px;margin-top: 85px; overflow:auto;opacity: 0.7;">
                <div id="list">
                    <ul>
                        <li>
    
                        </li>
                    </ul>
                </div>
            </div>
                <!-- <script id="list" type="text/html">
                    {% for item in items %}
                <div id="talkUser">
                    <p>{{item.username}}</p>
                </div>
                <div id="talkContent">
                    {{item.content}}
                </div>
                <ul>
                    {{item.date}}
                </ul>
                <hr style="border:0.5px dashed gray" />
                    {% endfor %}
                </script> -->
                <!-- <div id="talkUser">
                    <p>芥川龙</p>
                </div>
                <div id="talkContent">
                    Susan离开了洪洞县~
                </div>
                <ul>
                    2021-4-20
                </ul>
                <hr style="border:0.5px dashed gray" />

                <div id="talkUser">
                    <p>芥川龙</p>
                </div>
                <div id="talkContent">
                    Susan离开了洪洞县~
                </div>
                <ul>
                    2021-4-20
                </ul>
                <hr style="border:0.5px dashed gray" />

                <div id="talkUser">
                    <p>芥川龙</p>
                </div>
                <div id="talkContent">
                    Susan离开了洪洞县~
                </div>
                <ul>
                    2021-4-20
                </ul>
                <hr style="border:0.5px dashed gray" />

                <div id="talkUser">
                    <p>芥川龙</p>
                </div>
                <div id="talkContent">
                    Susan离开了洪洞县~
                </div>
                <ul>
                    2021-4-20
                </ul>
                <hr style="border:0.5px dashed gray" />

                <div id="talkUser">
                    <p>芥川龙</p>
                </div>
                <div id="talkContent">
                    Susan离开了洪洞县~
                </div>
                <ul>
                    2021-4-20
                </ul>
                <hr style="border:0.5px dashed gray" />

                <div id="talkUser">
                    <p>芥川龙</p>
                </div>
                <div id="talkContent">
                    Susan离开了洪洞县~
                </div>
                <ul>
                    2021-4-20
                </ul>
                <hr style="border:0.5px dashed gray" />

                <div id="talkUser">
                    <p>芥川龙</p>
                </div>
                <div id="talkContent">
                    Susan离开了洪洞县~
                </div>
                <ul>
                    2021-4-20
                </ul>
                <hr style="border:0.5px dashed gray" />

                <div id="talkUser">
                    <p>芥川龙</p>
                </div>
                <div id="talkContent">
                    Susan离开了洪洞县~
                </div>
                <ul>
                    2021-4-20
                </ul>
                <hr style="border:0.5px dashed gray" />

                <div id="talkUser">
                    <p>芥川龙</p>
                </div>
                <div id="talkContent">
                    Susan离开了洪洞县~
                </div>
                <ul>
                    2021-4-20
                </ul>
                <hr style="border:0.5px dashed gray" /> -->
            </div>
            <div class="alert alert-danger alert-dismissible fade show invisible text-center"
                style="width: 14rem;top: 2rem; background-color:white;" role="alert">
                <strong>Tips：</strong><label for="" id="msg">QAQ</label>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div>
                <!-- <form id="content" action="/" method="POST"> -->
                    <input type="text" placeholder="Please（input text）" id="input" name="input"
                        style="width: 315px;height: 40px;position: absolute;top: 795px;left: 335px; border-bottom-right-radius: 10px;border-bottom-left-radius: 10px;border-top-left-radius: 10px;border-top-right-radius: 10px;margin-left: 490px;">
                    <button type="button" onclick="Post()" name="post"
                        style="opacity: 0.7;height: 40px;background-color:lime;font-weight: bold;position: absolute;top: 795px;left: 310px; border-bottom-right-radius: 10px;border-bottom-left-radius: 10px;border-top-left-radius: 10px;border-top-right-radius: 10px;margin-left: 850px;">Post
                        Talking</button>
                <!-- </form> -->
            </div>
  

    </div>
    </div>
    <script src="/template.js/v1/template.js"></script>
    <script src="../statics/js/jquery-3.6.0.min.js"></script>
    <script src="../statics/js/bootstrap.min.js"></script>

    <script>
        function Post() {
            var input = document.getElementById('input');
            var ul = document.querySelector('#list ul');
            var getTime = new Date();
            var YY = getTime.getFullYear();
            var MM = getTime.getMonth() + 1;
            var DD = getTime.getDate();
            var hh = getTime.getHours();
            var mm = getTime.getMinutes();
            var ss = getTime.getSeconds();
            var day = getTime.getDay();
            if(input.value){
                var time = "发表时间："+YY+"年"+MM+"月"+DD+"号"+hh+"时"+mm+"分"+ss+"秒";
                var val = input.value;
                input.value = '';
                var oli = document.createElement('li');
                oli.innerHTML = '<p>'+val+'</p>';
                ul.insertBefore(oli,ul.firstChild);
                alert('发布成功！');
            }else{
                alert('请输入内容！')
            }

        }

    </script>

    <!-- <script>
        function Post() {
            let input = $('#input').val();
            if (input !== '') {
                $.ajax({
                    url: "/content",
                    type: "POST",
                    data: $('#content').serialize(),
                    dataType: "json",
                    success: function (res) {
                        if (res.code === 200 && input !== '') {
                            alert('发布成功！');
                            // window.location.href = '/';
                        }
                        else {
                            alert('请输入内容！');
                        }
                    },
                    error: function (res) {
                        alert_fn('网络错误！')
                    }
                })

                // 这个方法包装了alert的相关行为和显示的内容
                function alert_fn(msg) {
                    msg = msg || '密码不能为空，两次密码应该一致';
                    // 替换提示的内容
                    $('#msg').text(msg);
                    // 移除不显示的class，则alert将显示
                    $('.invisible').removeClass('invisible');
                    // 5秒中后，给alert增加不显示的class，则alert重新隐藏
                    setTimeout(() => {
                        $('.alert').addClass('invisible');
                    }, 5000);
                }
            }
        }

    </script> -->
</body>

</html>